<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 600px;
				
			}
			
			table{
			
				border-radius: 10px;
				border-color: #A52A2A;
			}
			td{
				font-size: 20px;
				border-radius: 10px;
				border-color: #1E90FF;
			}
			.user{
				border: 1px solid;
				width: 150px;
				height: 150px;
				background-image: url(../day01/images/灰太狼.jpg);
				border-radius: 100px;
			}
			ul{
				list-style: none;
			}
			li{
				font-weight: bolder;
				float: left;
				margin-right: 10px;
				background-color: #D2691E;
				padding: 5px 10px 5px 10px;
				color: #FFFFFF;
			}
			li:hover{
				background-color: #1E90FF;
			}
			a{
				text-decoration: none;
				color: #FFFFFF;
			}
			.c1{background-color: #D2691E;}
			.c1:hover{
				background-color: #008000;
				margin-top: 3px;
				margin-bottom: 3px;
				color: #FAEBD7;
				line-height: 30px;
			}
			.c2{	background-color: aquamarine;}
			.c2:hover{
			background-color: #008000;
				line-height: 30px;
			}
			.number{
				color: #000000;
				width: 20px;
			
				display: inline-table;
				text-align: center;
		background-color:green
			}
			
			
			.transitonbox{
				width: 300px;
				height: 300px;
				background-color: #DC143C;
				background-image: url(images/灰太狼.jpg);
				border: 2px solid;
			 
			 transition:1s		
			}			
			.transitonbox:hover{
				height:680px;
				width: 500px;
				color: #008000;
				}
					
				.movebox{
					width: 150px;
					height: 200px;
					background-color: red;
					background-image:url(../day01/images/灰太狼.jpg);
							
								animation: movebox 2s infinite;
					position: relative;
					
				}	
				@keyframes movebox{
					from{left: 0px;}
					to{left: 500px;}
				}
				
				.transfrom{
					width:580px ;
					height: 600px;
					border-radius: 3000px;
					background-image: url(images/地球.jpg);
					
					position: relative;
					animation: spin 4s linear infinite;
				}	
				.transfrom:hover{
					animation-play-state: paused;
				}
				@keyframes spin{
					from{transform: rotate(0degr);}
					to{transform: rotate(360deg);}
				}
				.bu1{
					background-color:dodgerblue;
					 color: #FAEBD7;
			   	border-radius: 5px;
				 font-weight: bolder;
				}
				.bu1:hover{
					background-color: chartreuse;
				}
				.bu2{
					background-color: #DC143C;
				}
				.k{
					border-radius: 5px;
					background-color: aqua;
				}
				.k:hover{
					background-color: #A52A2A;
				}
			
									
							
										
		</style>
		
		<!--引入外部第三方css文件，rel固定值：样式表，href链接地址
		 min意思最小文化，压缩（把文件的空格换行都缩进去掉）一行
		-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
	</head>
	<body>
		<div>
		<h1>1.票</h1>
		<table border="1">
			<tr >
				<td rowspan="2">综合测试二阶段</td>
				<td>前端</td>
				</tr>
				<tr>
				
					<td>web</td>
				</tr>
		</table>
		
		<h1>2.头像</h1>
		<div class="user"></div>
		
		<h1>3.菜单</h1>
		
			<ul>
			<li><a href="https://www.jd.com" target="_blank"> 阿里</a></li>
			<li><a href="https://www.jd.com" target="_blank"> 京东</a></li>
			<li><a href="https://www.jd.com" target="_blank"> 拼多多</a></li>
			<div></div>
		
	   </div>
	   
		<div ><h1>0</h1> </div>
		
		<h1>4.文档</h1>
		<div class="c3">
			<div class="c1"><span class="number">1</span> 数码产品</div>
			<div class="c2"><span class="number">2</span> 家用电器</div>
			<div class="c1"><span class="number">3</span> 玩具乐器</div>
			
		</div>
		
		<h1>5.动画拉伸</h1>
		<div class="transitonbox">拉伸</div>
		
		<h1>6.移动效果</h1>
		<div class="movebox"></div>
		
		<h1>7.旋转效果</h1>
		<div class="transfrom"></div>
		
		<h1>8.音频</h1>
		<audio src="audio/li.mp3" controls="controls"></audio>
		<h1>9.视频</h1>
		<h1>10.表单UI</h1>
		
		
		<div class="container">
			
			<h2>学生信息管理系统mis</h2>
		
			
			<div class="form-group">
				<!--lable标签 for属性光标定位、-->
				<label for="name">姓名:</label>
				<!--文本输入框  ,h5X新特性placeholder  -->
				<input type="text" name="name" id="name"
				class="form-control"
				placeholder="请输入姓名..."
				/>
			</div>

              <div class="form-group">
	           <label for="age">年龄:</label>
	            <input type="number" name="age" id="age" 
	            class="form-control"
				 placeholder="请输入年龄..."
	              />
              </div>
			  
			<div class="form-group">
				<label for="sex">性别: (单选)</label>
				<!--radio同名互斥。只能选择一个-->
				<div class="radio-inline">
				<input type="radio" name="sex" id="sex">男 />
				
				
				<input type="radio" name="sex"  id="sex">女/>
				</div>
			</div>
			
			<div class="form-group">
				<label for="hobby">爱好:  (多选)</label>
				<div class="radio-inline">
					<input type="checkbox" name="hobby"/>吃
				</div>
				
				<div class="radio-inline">
					<input type="checkbox" name="bobby" id="hobby"/>喝
				</div>
			  <div class="radio-inline">
				  <input type="checkbox" name="hobby" id="hobby"/>玩
			  </div>
			</div>
			
			<div class="form-group">
				
				<label>学历:</label>
				<!--单选，选择“幼儿园”，表单提交"1"性能更高-->
				<select class="k"
				name="edu" id="edu">
					<option value="1">幼儿园</option>
					<option value="2">小学生</option>
					<option value="3">中学生</option>
					<option value="4" selected="selected">大学生</option>
					<option value="5">社会畜</option>
					<option value="6">老年人</option>
					<option value="7">秃顶人</option>
					
					
				</select>
				
			</div>
			
			<div class="form-group">
				<!--class属性支持多个样式，样式之间用空格隔开-->
				<input class="btn btn-primary" type="button" name="submit" value="保存"/>
				<button class="btn btn-danger" name="clear">取消</button>
			</div>
			
		</div>
		
		
		
		<h1></h1>
		<h1></h1>
		
		
		</div>
	</body>
</html>
